<template>
  <!-- 表单 -->
  <el-table :data="ProListData" style="width: 100%">
    <el-table-column prop="proname" label="商品名" width="180" align="center" />
    <el-table-column label="价格" width="180" align="center">
      <template #default="scope">
        <span>{{ scope.row.originprice }}元</span>
      </template>
    </el-table-column>
    <el-table-column label="图片" width="180" align="center">
      <template #default="scope">
        <img :src="scope.row.img1" alt="" class="table-img" />
      </template>
    </el-table-column>

    <el-table-column prop="issale" label="是否可售卖" align="center">
      <template #default="scope">
        <el-switch
          v-model="scope.row.issale"
          :active-value="1"
          :inactive-value="0"
          @change="switchChangeFn(scope.row.proid, scope.row.issale)"
        />
      </template>
    </el-table-column>
    <el-table-column label="操作" align="center">
      <template #default="scope">
        <el-button size="small" @click="handleEdit(scope.row)"> 编辑 </el-button>
        <el-button size="small" type="danger" @click="handleDelete(scope.row)"> 删除 </el-button>
      </template>
    </el-table-column>
  </el-table>

  <!-- 分页器 -->
  <div class=".Paginator">
    <el-pagination layout="prev, pager, next" :total="total" @change="pagerChange($event)" />
  </div>

  <!-- 抽屉 -->
  <el-drawer v-model="showdrawer" direction="rtl">
    <template #header>
      <h4>修改内容</h4>
    </template>
    <template #default>
      <div>
        <!-- =============================表单=========================== -->
        <el-form
          ref="ruleFormRef"
          :model="obj"
          style="max-width: 600px"
          :rules="rules"
          label-width="auto"
          class="demo-ruleForm"
          :size="formSize"
          status-icon
        >
          <el-form-item label="商品名称">
            <el-input v-model="obj.proname" prop="proname" />
          </el-form-item>
          <el-form-item label="商品价格">
            <el-input v-model="obj.originprice" prop="originprice" />
          </el-form-item>

          <el-form-item label="图片">
            <!-- 上传图片组件 -->
            <el-upload
              class="upload-demo"
              drag
              multiple
              action="http://localhost:3001/admin/file/upload"
              :headers="{ token: token }"
              name="img"
              :on-success="handleUpload"
            >
              <!-- handleUpload -->
              <el-icon class="el-icon--upload">
                <upload-filled />
              </el-icon>
              <div class="el-upload__text">拖拽文件到此区域，或 <em>点击上传</em></div>
              <template #tip>
                <div class="el-upload__tip">只支持 jpg/png 格式，且文件大小小于 500KB</div>
              </template>
            </el-upload>
          </el-form-item>

          <el-form-item label="是否可售">
            <el-switch
              v-model="obj.issale"
              :active-value="1"
              :inactive-value="0"
              @change="drawerswitchChangeFn(obj.issale)"
            />
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="submitForm(ruleFormRef)"> 修改 </el-button>
            <!-- <el-button @click="resetForm(ruleFormRef)">重置</el-button> -->
          </el-form-item>
        </el-form>
      </div>
    </template>
  </el-drawer>
</template>

<script setup lang="ts">
const token = ref(localStorage.getItem('xx-mall-admin-token'))
import { delProReq, getProListReq, patchProReq } from '../api/product'
import { ElMessage } from 'element-plus'
import { reactive, ref } from 'vue'
const ProListData = ref([])
getproList()
const total = ref(0)
function getproList(count = 1, limitNum = 10) {
  getProListReq(count, limitNum).then((res) => {
    console.log(res.data)
    total.value = res.data.total
    ProListData.value = res.data.data
  })
}

interface IRowItem {
  img1: string
  proname: string
  issale: number
  originprice: number
  desc: string
  proid: string
}
function switchChangeFn(proid: string, issale: number, flag = true) {
  patchProReq(proid, { issale: issale }).then((res) => {
    if (res.data.code == 200 && flag) {
      ElMessage.success('售卖状态修改成功！')
    }
  })
}
/**
 * 1.点击编辑按钮，打开抽屉
 * 2.抽屉内表单数据回显
 * 3.提交表单
 */
//编辑部分
const showdrawer = ref(false)

const obj = reactive<IRowItem>({
  img1: '',
  proname: '',
  issale: 0,
  originprice: 0,
  desc: '',
  proid: '',
})
//打开编辑
const handleEdit = (row: IRowItem) => {
  showdrawer.value = true
  obj.desc = row.desc
  obj.proname = row.proname
  obj.issale = row.issale
  obj.originprice = row.originprice
  obj.proid = row.proid
  obj.img1 = row.img1
}
// =================================表单==========================

import type { ComponentSize, FormInstance, FormRules } from 'element-plus'
//上传图片
interface UploadResponse {
  fileUrl: string;
}

function handleUpload(res: UploadResponse) {
  obj.img1 = res.fileUrl
}
const formSize = ref<ComponentSize>('default')
const ruleFormRef = ref<FormInstance>()
const rules = reactive<FormRules<IRowItem>>({
  proname: [{ required: true, message: '请输入商品名', trigger: 'blur' }],
  originprice: [{ required: true, message: '请输入价格', trigger: 'blur' }],
})

function drawerswitchChangeFn(issale: number) {
  obj.issale = issale
}
//提交
const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid) => {
    if (valid) {
      patchProReq(obj.proid, {
        proname: obj.proname,
        img1: obj.img1,
        issale: obj.issale,
        originprice: obj.originprice,
      }).then((res) => {
        if (res.data.code == 200) {
          showdrawer.value = false
          getproList()
          ElMessage.success('修改成功！')
        } else {
          ElMessage.error(res.data.message)
        }
      })
    } else {
      ElMessage.error('表单错误!')
    }
  })
}
//重置表单
// const resetForm = (formEl: FormInstance | undefined) => {

//   if (!formEl) return

//   formEl.resetFields()
// }

//删除
const handleDelete = (row: IRowItem) => {
  delProReq(row.proid).then((res) => {
    console.log(res.data)
    if (res.data.code == 200) {
      getproList()
    }
  })
}
//分页器
function pagerChange(count: number) {
  getproList(count)
}
</script>

<style scoped lang="scss">
.table-img {
  width: 75px;
}
</style>
